<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="50%"
    @close="handleClose"
  >
    <el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
      <el-form-item label="设备ID：" prop="equipmentId">
        <el-input v-model="formData.equipmentId" :disabled="isEdit"></el-input>
      </el-form-item>
      <el-form-item label="设备型号：" prop="equipmentModel">
        <el-input v-model="formData.equipmentModel"></el-input>
      </el-form-item>
      <el-form-item label="设备规格：" prop="equipmentSpecification">
        <el-input v-model="formData.equipmentSpecification"></el-input>
      </el-form-item>
      <el-form-item label="购买日期：" prop="purchaseDate">
        <el-date-picker
          v-model="formData.purchaseDate"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="存储位置：" prop="storageLocation">
        <el-input v-model="formData.storageLocation"></el-input>
      </el-form-item>
      <el-form-item label="设备参数：" prop="equipmentParameters">
        <el-input v-model="formData.equipmentParameters"></el-input>
      </el-form-item>
      <el-form-item label="设备价格：" prop="equipmentPrice">
        <el-input v-model="formData.equipmentPrice"></el-input>
      </el-form-item>
      <el-form-item label="备注：">
        <el-input v-model="formData.remark" type="textarea" :rows="3"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import axios from 'axios';

export default {
  name: 'EditEquip',
  props: {
    form: Object,
    title: String,
    editDialogVisible: Boolean,
    isEdit: Boolean
  },
  data() {
    return {
      dialogVisible: this.editDialogVisible,
      loading: false,
      formData: { ...this.form },
      rules: {
        equipmentId: [
          { required: true, message: '请输入设备ID', trigger: 'blur' }
        ],
        equipmentModel: [
          { required: true, message: '请输入设备型号', trigger: 'blur' }
        ],
        equipmentSpecification: [
          { required: true, message: '请输入设备规格', trigger: 'blur' }
        ],
        purchaseDate: [
          { required: true, message: '请选择购买日期', trigger: 'blur' }
        ],
        storageLocation: [
          { required: true, message: '请输入存储位置', trigger: 'blur' }
        ],
        equipmentParameters: [
          { required: true, message: '请输入设备参数', trigger: 'blur' }
        ],
        equipmentPrice: [
          { required: true, message: '请输入设备价格', trigger: 'blur' }
        ]
      }
    };
  },
  watch: {
    editDialogVisible(val) {
      this.dialogVisible = val;
      if (val) {
        this.formData = { ...this.form };
      }
    },
    form(val) {
      this.formData = { ...val };
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:editDialogVisible', false);
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          let url = '';
          if (this.isEdit) {
            url = 'http://localhost:8080/equip/edit';
          } else {
            url = 'http://localhost:8080/equip/addNew';
          }
          this.loading = true;
          axios.post(url, this.formData)
            .then(response => {
              this.loading = false;
              if (response.data.code === 200) {
                this.$message({
                  type: 'success',
                  message: response.data.message
                });
                this.handleClose();
              } else {
                this.$message({
                  type: 'error',
                  message: response.data.message
                });
              }
            })
            .catch(error => {
              this.loading = false;
              this.$message({
                type: 'info',
                message: '操作失败'
              });
            });
        } else {
          this.$message.error('表单验证失败，请检查输入');
        }
      });
    }
  }
};
</script>

<style scoped>
</style>